import {defineComponent, ref, computed, onMounted} from "vue";
import Style from './1080.module.scss';
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
import { ElButton } from "element-plus";
import {closeLoading, showLoading} from "@/utils";
import {getMzpdRq} from "@/api/his";
import {useRoute} from "vue-router";
import {DateItem} from "@/api/typing";
import {useBreadcrumbStore} from "@/store/modules/breadcrumb";



export default defineComponent({
    emits: ["dateChange"],
    setup(props, { attrs, emit }) {
        // 当前显示的日期的起始索引
        const startIndex = ref(0);
        // 显示的日期数量
        const visibleCount = 7;
        // 当前选中的日期索引
        const activeIndex = ref(0); // 默认选中"今日"

        // 计算当前应该显示的日期
        const visibleDates = computed<DateItem[]>(() => {
            return baseDateArr.value.slice(startIndex.value, startIndex.value + visibleCount);
        });

        // 计算当前选中索引的相对位置，
        const visibleActiveIndex = computed<number>(() => {
            return activeIndex.value - startIndex.value;
        });

        // 检查是否可以向左滚动
        const canScrollLeft = computed<boolean>(() => {
            return startIndex.value > 0;
        });

        // 检查是否可以向右滚动
        const canScrollRight = computed<boolean>(() => {
            return startIndex.value + visibleCount < baseDateArr.value.length;
        });


            // 向左滚动日期
        const scrollLeft = () => {
            //向左滚动一个，但不小于0
            // if (canScrollLeft.value) {
            //     startIndex.value = Math.max(0, startIndex.value - 1);
            // }
            // //向左滚动7个，但不小于0
            if (canScrollLeft.value) {
                // 向左滚动7个，但不小于0
                startIndex.value = Math.max(0, startIndex.value - visibleCount);
                // 调整选中项到当前视图范围内
                // adjustActiveIndex();
            }
        };

        // 向右滚动日期
        const scrollRight = () => {
            // 向右滚动一个，但不大于baseDateArr.value.length - visibleCount
            // if (canScrollRight.value) {
            //     //确保startIndex在在+1时不会超过baseDateArr.value.length - visibleCount
            //     startIndex.value = Math.min(
            //         baseDateArr.value.length - visibleCount,
            //         startIndex.value + 1
            //     );
            // }
            //向右滚动7个，但不大于baseDateArr.value.length - visibleCount
            if (canScrollRight.value) {
                // 向右滚动7个，但不超过最大范围
                startIndex.value = Math.min(
                    baseDateArr.value.length - visibleCount,
                    startIndex.value + visibleCount
                );
                // 调整选中项到当前视图范围内
                // adjustActiveIndex();
            }
        };
        // 调整选中项到当前视图范围内
        const adjustActiveIndex = () => {
            const endIndex = startIndex.value + visibleCount - 1;
            // 如果当前选中项不在可视范围内，则选中第一个可视项
            if (activeIndex.value < startIndex.value || activeIndex.value > endIndex) {
                activeIndex.value = startIndex.value;
                emit('dateChange', baseDateArr.value[activeIndex.value]);
            }
        };

        // 选择日期
        const selectDate = (index: number) => {
            activeIndex.value = startIndex.value + index;
            // 触发事件，通知父组件日期已更改
            emit('dateChange', baseDateArr.value[activeIndex.value]);
        };
        const route = useRoute();
        const ZSId = route.query.ZS_ID ?? "";

        const baseDateArr = ref<DateItem[]>([]);
        // 获取可预约的日期
        async function getMzpdHyData() {
            showLoading()
            const res = await getMzpdRq({
                type: "all",
                ZS_ID: ZSId
            })
           baseDateArr.value = res.rows!;
            closeLoading();
        }
        const breadcrumbStore = useBreadcrumbStore(); // 实例化Pinia存储
        onMounted(async () => {
            if (breadcrumbStore.titlelx === '预约'){
                // 先获取数据
                await getMzpdHyData();
            }
            // 数据加载完成后再选中第一个日期
            if (baseDateArr.value.length > 0) {
                selectDate(0);
            }
        });

        return () => (
            <div class={Style.dateSelectorContainer} {...attrs}>
                {/* 左箭头按钮 */}
                <ElButton
                    // class={Style.arrowButton}
                    icon={<LeftOutlined class={Style.arrowIcon}/>}
                    size="small"
                    disabled={!canScrollLeft.value}
                    onClick={scrollLeft}
                />

                {/* 日期选择区域 */}
                <div class={Style.top_item}>
                    {visibleDates.value.map((date, index) => (
                        <div
                            key={startIndex.value + index}
                            class={[
                                Style.tag,
                                Style.fontStyle,
                                visibleActiveIndex.value === index ? Style.tag_active : ""
                            ]}
                            onClick={() => selectDate(index)}
                        >
                            <div>{date.rq}</div>
                            <div>{date.week}</div>
                        </div>
                    ))}
                </div>

                {/* 右箭头按钮 */}
                <ElButton
                    // class={Style.arrowButton}
                    icon={<RightOutlined class={Style.arrowIcon}/>}
                    size="small"
                    disabled={!canScrollRight.value}
                    onClick={scrollRight}
                />
            </div>
        );
    }
})
